import { Component } from 'solid-js';
import { Progress } from '@/components/ui/progress';
import { Button } from '@/components/ui/button';
import { Pause, Play, X } from 'lucide-solid';
import { DownloadTask } from '@/types/download';
import { useDownloadsStore } from '@/features/downloads/store';

const DownloadCard: Component<{ download: DownloadTask }> = (props) => {
  const { pauseDownload, resumeDownload, cancelDownload } = useDownloadsStore();

  return (
    <div class="flex items-center gap-3 p-4 bg-card rounded-lg border border-border/40">
      <img src={props.download.icon} alt={props.download.name} class="w-12 h-12 rounded-lg" />
      <div class="flex-1">
        <div class="flex items-center justify-between mb-2">
          <h3 class="font-medium">{props.download.name}</h3>
          <div class="text-sm text-muted-foreground">
            {props.download.status === 'queued' ? '排队中' : 
              props.download.status === 'downloading' && props.download.speed ? 
                `${props.download.speed} - ` : 
              props.download.status === 'error' ? '失败' :
              props.download.status === 'installing' ? '正在安装' :
              props.download.status === 'installed' ? '安装完成' : 
              ''}
            {props.download.status !== 'queued' && props.download.size}
          </div>
        </div>
        <div class="flex items-center gap-2">
          <Progress 
            value={props.download.status === 'installed' ? 100 : props.download.progress} 
            indeterminate={props.download.status === 'installing'}
            class="flex-1" 
          />
          <span class="text-sm text-muted-foreground">
            {['installing', 'installed'].includes(props.download.status) ? 100 : props.download.progress}%
          </span>
          {(props.download.status === 'downloading' || props.download.status === 'queued') && (
            <Button 
              size="icon" 
              variant="ghost" 
              class='h-8 w-8 px-2'
              onClick={() => pauseDownload(props.download.category, props.download.pkgname)}
            >
              <Pause size={16} />
            </Button>
          )}
          {props.download.status === 'paused' && (
            <Button 
              size="icon" 
              variant="ghost" 
              class='h-8 w-8 px-2'
              onClick={() => resumeDownload(props.download.category, props.download.pkgname)}
            >
              <Play size={16} />
            </Button>
          )}
          <Button 
            size="icon" 
            variant="ghost" 
            class="text-destructive h-8 w-8 px-2"
            onClick={() => cancelDownload(props.download.category, props.download.pkgname)}
          >
            <X size={16} />
          </Button>
        </div>
      </div>
    </div>
  );
};

export default DownloadCard;